<!DOCTYPE html>
<html>
<head>
	<#include "/pages/templet/head.html"/>
	<script type="text/javascript" src="/assets/js/jquery.hotkeys.min.js"></script>
	<!--页面按键事件-->
	<script type="text/javascript" src="/assets/js/R3_BigData.action.js"></script>
	<!--页面按键事件-->
	<style>
		.designer_k{
			overflow-x:hidden;
		}
		.designer_k .newDom{
			min-width:110px;
		}
		.designer_k .row-fluid {
			width: 100% !important;
		}
		.newDom{
			cursor: pointer;
		}
		.designer_k .sel{
			border:1px solid #CCE0EE;
		}
		.designer_k .sel .table_menu{
			display:inline;
			position: absolute;
			top: -1px;
		}
		.newDom{padding:5px 5px 5px 7px;}
		.row-fluid{padding-top:30px;}
		.row-fluid [class*="span"]:first-child {
		  margin-left: 0 !important;
		}
	</style>
	<script>
		Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
			return {
				radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
				stops: [
					[0, color],
					[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
				]
			};
		});
		$.fn.RevertTable = function() { //还原表格
			$("tr", this).each(function(trindex, tritem) {
				$(tritem).find("td").each(function(tdindex, tditem) {
					var col = $(tditem).attr("colspan"),
					row = $(tditem).attr("rowspan"),
					c = col > 1 ? col: 1,
					r = row > 1 ? row: 1,
					index = $(tditem).index(),
					curr = $(tditem).parent();
					var value = $(tditem).text();
					var newtd = "<td style=\"display:none\">" + value + "</td>";
					while (r--) {
						c = col > 1 ? col: 1;
						while (--c) {
							curr.find('td').eq(index).after(newtd);
						}

						if (r) {
							curr = curr.next();
							curr.find('td').eq(index).before(newtd);
						}
					}
					//$(tditem).attr("colspan",1); 
					//$(tditem).attr("rowspan",1); 
				});
			});
		}

		$.fn.SetNewValueTd = function(text) { //td重新赋值
			var col = this.attr("colspan"),
			row = this.attr("rowspan"),
			c = col > 1 ? col: 1,
			r = row > 1 ? row: 1,
			index = this.index(),
			curr = this.parent();
			while (r--) {
				c = col > 1 ? col: 1;
				while (c--) {
					curr.find('td').eq(index + c).text(text);
				}
				curr = curr.next();
			}
		}
		var layout = [
			{ id:1, pId:0, name:"布局组件", open:true}
			,{ id:1001, pId:1, name:"栅格布局" , open:true}
			,{ id:1001000, pId:1001, type:"grid",lid:"4028d48142ef58380142ef6cdea900af" , name:"行块",iconSkin:"icon12", icon:"/assets/images/icon-file-closed.png"}
			,{ id:1001001, pId:1001, type:"grid",lid:"4028d48142ef58380142ef6d0af900b5" , name:"月",iconSkin:"icon12", icon:"/assets/images/icon-file-closed.png"}
			,{ id:1001002, pId:1001, type:"grid",lid:"4028d48142ef58380142ef6d40e500bb" , name:"日",iconSkin:"icon12", icon:"/assets/images/icon-file-closed.png"} 
			,{ id:12, pId:1, name:"流式布局", open:true}
			,{ id:120000, pId:12, name:"平均值" , type:"measure" , mid:"40288104449f98350144a0516e4500b9",iconSkin:"icon10", icon:"/assets/images/icon-file-closed.png"}
			,{ id:120001, pId:12, name:"呼叫总时长" , type:"measure" , mid:"4028d48142ef2fb70142ef4f9ad4008d",iconSkin:"icon10", icon:"/assets/images/icon-file-closed.png"}
			,{ id:120002, pId:12, name:"平均通话时长" , type:"measure" , mid:"4028d48142f66ae00142f6758c770022",iconSkin:"icon10", icon:"/assets/images/icon-file-closed.png"}
			,{ id:120003, pId:12, name:"平均空闲时长" , type:"measure" , mid:"4028d48142f66ae00142f675934b0025",iconSkin:"icon10", icon:"/assets/images/icon-file-closed.png"}
			,{ id:120004, pId:12, name:"平均无效时长" , type:"measure" , mid:"4028d48142f66ae00142f6759b210028",iconSkin:"icon10", icon:"/assets/images/icon-file-closed.png"}
			,{ id:120005, pId:12, name:"平均等待时长" , type:"measure" , mid:"4028d48142f66ae00142f675a15b002b",iconSkin:"icon10", icon:"/assets/images/icon-file-closed.png"}
			,{ id:120006, pId:12, name:"示忙次数" , type:"measure" , mid:"4028d48142f66ae00142f675aa10002e",iconSkin:"icon10", icon:"/assets/images/icon-file-closed.png"}
		];
        var model =[
			{ id:0, pId:0, name:"组件库", open:true , viewtype:'view'}
			,{ id:100, pId:0, name:'选择组件',open:true , viewtype:'view'}
			,{ id:101, pId:100, name:'下拉列表',iconSkin:"icon02",type:'402881e63b50b068013b5186c72a0001' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
			,{ id:102, pId:100, name:'多选框',iconSkin:"icon02",type:'8a875ce43f0ce25d013f0cf78ffc0003' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
			,{ id:103, pId:100, name:'下拉树形选择列表',iconSkin:"icon02",type:'8a875ce43f0ce25d013f0cf85b090004' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
			,{ id:200, pId:0, name:'输入组件',open:true , viewtype:'view'}
			,{ id:201, pId:200, name:'文本框',iconSkin:"icon02",type:'2cbc808d3b7f6ff8013b7f706f370001' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
			,{ id:202, pId:200, name:'日历选择',iconSkin:"icon02",type:'8a875ce43f0ce25d013f0cf943880005' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
			,{ id:203, pId:200, name:'日历选择-月',iconSkin:"icon02",type:'8a875ce43f0ce25d013f0cfa401d0006' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
			,{ id:300, pId:0, name:'表格组件',open:true , viewtype:'view'}
			,{ id:301, pId:300, name:'普通表格',iconSkin:"icon02",type:'402881e63b50b068013b518865dc0002' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
			,{ id:302, pId:300, name:'分页',iconSkin:"icon02",type:'40289e633c70b706013c70e4ad7b0008' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
			,{ id:303, pId:300, name:'带边框表格',iconSkin:"icon02",type:'818181073b88d434013b890e01b10004' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
			,{ id:2500, pId:0, name:'按钮',open:true , viewtype:'view'}
			,{ id:2501, pId:2500, name:'导出',iconSkin:"icon02",type:'40289e633c70b706013c70ef90360009' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
			,{ id:2502, pId:2500, name:'SQL语句版导出',iconSkin:"icon02",type:'8ae3d19b40a4a6170140a4ae70460001' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
			,{ id:2503, pId:2500, name:'提交按钮',iconSkin:"icon02",type:'ff8080813b83b45a013b83dc5d4c0012' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
			,{ id:2504, pId:2500, name:'取消按钮',iconSkin:"icon02",type:'ff8080813b83b45a013b83dc8c8a0013' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
			,{ id:2505, pId:2500, name:'普通按钮',iconSkin:"icon02",type:'ff8080813b83b45a013b83df4be60014' , viewtype:'view', icon:"/assets/images/icon-file-closed.png"}
		];

		$(function() {
			//installResize
			var resize_obj, resize_bar_h, resize_bar_hText, resize_bar_v;
			
			$(".newDom").resizable({
				handles: "e, s, w, se, sw",
			}).draggable({
				snap: true,
				handle: ".table_menu_inner",
				containment: "parent"
			})
			/**
			$(".designer_k").resizable({
				handles: "e, s, w, se, sw",
			}).draggable({
				handle: ".table_menu_inner",
				containment: "parent"
			});	 \**/
			//--end
			$.fn.zTree.init($(document.getElementById("zTree_adminLIst")), setting, model);
			$(".left_btm a").click(function() {
				if (!$(this).hasClass('active')) {
					$(this).siblings().removeClass('active');
					$(this).addClass('active');
					if ($(this).attr('data-node') == "layout") {
						$.fn.zTree.init($(document.getElementById("zTree_adminLIst")), setting, layout);
					} else {
						$.fn.zTree.init($(document.getElementById("zTree_adminLIst")), setting, model);
					}
				}
			});

			$(".data_model p a").click(function() {
				if (!$(this).hasClass('active')) {
					$(this).siblings().removeClass('active');
					$(this).addClass('active');
				}
			});

			var tab_arr = ["table", "span", "div", "text"];
			$(document).on("click", '.newDom',
			function() {
				$(".topHighLight").find("a").removeClass("active");
				if ($(".newDom").find("table")) {
					$(".topHighLight").find("a").eq(0).addClass("active");
				} else {
					$(".topHighLight").find("a").eq(2).addClass("active");
				}
				$(".newDom").removeClass("sel");
				$(this).toggleClass('sel');
				
			});

			var seletable = $(".selectableTable");
			var startIndex;
			seletable.find("td").filter(":not('.blue_k')").addClass("needSelect");
			seletable.RevertTable();
			seletable.each(function() {
				seletable.find("thead").sortable({
					helper: "clone",
					items: "th:not(.s_blue)",
					start: function(event, ui) {
						startIndex = ui.item.index();
						seletable.find("tr td,tr th").removeClass('ui-selected');
						ui.helper.css({
							"vertical-align": "top",
							"height": ui.item.height()
						})
					},
					stop: function(event, ui) {
						var sortableIndex = ui.item.index();
						if (sortableIndex != startIndex) {
							var oldValue = [];
							var tr_arr = seletable.find("tbody").find("tr");
							var tr_len = tr_arr.length;
							for (var k = 0; k < tr_len; k++) { //获取起始列的值
								tditem = tr_arr.eq(k).find("td").eq(startIndex);
								oldValue.push(tditem.text());
							}
							var i = startIndex;
							if (i < sortableIndex) { //后移
								while (i < sortableIndex) {
									for (var k = 0; k < tr_len; k++) {
										tditem = tr_arr.eq(k).find("td").eq(i);
										if (tditem.hasClass('needSelect')) {
											tditem.SetNewValueTd(tr_arr.eq(k).find("td").eq(i + 1).text());
										}
									}
									i++;
								}
							} else { //前移
								while (i > sortableIndex) {
									for (var k = 0; k < tr_len; k++) {
										tditem = tr_arr.eq(k).find("td").eq(i);
										if (tditem.hasClass('needSelect')) {
											tditem.SetNewValueTd(tr_arr.eq(k).find("td").eq(i - 1).text());
										}
									}
									i--;
								}
							}
							for (var k = 0; k < tr_len; k++) { //将起始列的值赋值给目标列
								tditem = tr_arr.eq(k).find("td").eq(sortableIndex);
								if (tditem.hasClass('needSelect')) {
									tditem.SetNewValueTd(oldValue[k]);
								}
							}
						}
					},
					create: function() {

}
				}).disableSelection();

				var lastSelect = null; //
				var content = seletable.find("tbody").selectable({
					filter: ".needSelect",
					start: function() {
						if (lastSelect) {
							lastSelect.removeClass('ui-selected');
						}
					},
					create: function() {
						var elemself = $(this);
						var thd = seletable.find("thead");
						var ths = thd.find("th").filter(":not('.s_blue')");
						ths.click(function() { //列全选
							var colnum = $(this).index() + 1;
							seletable.find("tr td,tr th").removeClass('ui-selected');
							lastSelect = seletable.find("tr td,tr th").filter(":nth-child(" + colnum + ")");
							lastSelect.addClass("ui-selected");
						});
						var trs = seletable.find("tbody").find("tr td").filter('.blue_k');
						trs.click(function() { //行全选
							seletable.find("tr td,tr th").removeClass('ui-selected');
							lastSelect = $(this).parent().find('td');
							var rowspan = $(this).attr('rowspan') ? $(this).attr('rowspan') : 1;
							if (rowspan) {
								var currTarget = $(this).parent();
								while (rowspan) {
									currTarget.find('td').addClass("ui-selected");
									currTarget = currTarget.next();
									rowspan--;
								}
							}
						});
						elemself.on("mouseover", ".blue_k",
						function() {
							seletable.find("tbody").selectable("disable");
						}).on("mouseout", ".blue_k",
						function() {
							seletable.find("tbody").selectable("enable");
						});
						//  console.log(ths)
					}
				});
			});
		});
		window.onload=window.onresize=function(){
			  resizeDesign();
		}
		function resizeDesign(){
			var winHeight = $(window).height() , winWidth = $(window).width();
			var isNotIE=-[-1,];
			if(isNotIE)
			{
				 scrollHeight = document.body.scrollHeight;//非IE浏览器
			}
			else
			{
				 scrollHeight = document.documentElement.scrollHeight;//IE浏览器
			}
			$('#design_table').height(scrollHeight-130 - $('.shrinkage').height());
		}
		
	</script>
</head>

<body>
	<div class="container rs_layout" wrapper="true">
		<!-- Everything started here -->
		<div class="rs_layout_top" style="height:98px;">
			<div class="nav_top">
				<!--NavTop-->
				<div class="top_menu">
					<ul>
						<li>
							<span>
								文件
							</span>
							<ul>
								<li>
									<span>
										文件01
									</span>
									<ol>
										<li>
											<a href="#">
												文件001
											</a>
										</li>
										<li>
											<a href="#">
												文件001
											</a>
										</li>
										<li>
											<a href="#">
												文件001
											</a>
										</li>
										<li>
											<a href="#">
												文件001
											</a>
										</li>
									</ol>
								</li>
								<li>
									<span>
										文件02
									</span>
								</li>
								<li>
									<span>
										文件03
									</span>
								</li>
							</ul>
						</li>
						<li>
							<span>
								编辑
							</span>
							<ul>
								<li>
									<span>
										编辑01
									</span>
									<ol>
										<li>
											<a href="#">
												编辑001
											</a>
										</li>
										<li>
											<a href="#">
												编辑001
											</a>
										</li>
										<li>
											<a href="#">
												编辑001
											</a>
										</li>
										<li>
											<a href="#">
												编辑001
											</a>
										</li>
									</ol>
								</li>
								<li>
									<span>
										编辑02
									</span>
								</li>
								<li>
									<span>
										编辑03
									</span>
								</li>
							</ul>
						</li>
						<li>
							<span>
								视图
							</span>
						</li>
						<li>
							<span>
								结构
							</span>
						</li>
						<li>
							<span>
								数据
							</span>
						</li>
						<li>
							<span>
								样式
							</span>
						</li>
						<li>
							<span>
								运行
							</span>
						</li>
						<li>
							<span>
								工具
							</span>
						</li>
					</ul>
				</div>
				<div class="nav_controlBar">
					<ul class="nav_controlList">
						<li class="nav_controlIthems">
							<i class="navIcons nicon-2">
							</i>
							首页
						</li>
						<li class="nav_controlIthems">
							<i class="navIcons nicon-4">
							</i>
							帮助
						</li>
						<li class="nav_controlIthems">
						<a href="javascript:void(0)" onclick="art.confirm('您确定需要退出系统？' , function(){location.href='/${orgi}/logout.html'} , function(){})">
							<i class="navIcons nicon-5">
							</i>
							退出
							</a>
						</li>
					</ul>
					<h1 class="comName2">
						R3 Query V5.0 Build 106.56
					</h1>
				</div>
			</div>
			<div class="function">
				<a href="#">
					<img src="/assets/images/top_icon.png">
				</a>
				<a href="#">
					<img src="/assets/images/top_icon1.png">
				</a>
				<span>
					<a href="#">
						<img src="/assets/images/top_icon2.png">
					</a>
				</span>
				<a href="#">
					<img src="/assets/images/top_icon3.png">
				</a>
				<a href="#">
					<img src="/assets/images/ctr-bot-icons-1.png">
				</a>
				<a href="#">
					<img src="/assets/images/ctr-bot-icons-3.png">
				</a>
				<span>
					<a href="#">
						<img src="/assets/images/ctr-icons-15.png">
					</a>
				</span>
				<a href="#">
					<img src="/assets/images/top_icon4.png">
				</a>
				<span>
					<a href="#">
						<img src="/assets/images/top_icon5.png">
					</a>
				</span>
				<div class="icon_xl b_r_x">
					<span>
						<img src="/assets/images/tci-2.png">
					</span>
				</div>
				<div class="icon_xl">
					<i>
						<img src="/assets/images/top_icon7.png">
					</i>
				</div>
				<div class="icon_xl">
					<i>
						<img src="/assets/images/top_icon8.png">
					</i>
				</div>
				<div class="icon_xl">
					<i>
						<img src="/assets/images/top_icon9.png">
					</i>
				</div>
				<div class="icon_xl">
					<i>
						<img src="/assets/images/top_icon10.png">
					</i>
				</div>
				<div class="icon_xl b_r_x">
					<span>
						<img src="/assets/images/top_icon11.png">
					</span>
				</div>
				<a href="#">
					<img src="/assets/images/top_icon12.png">
				</a>
				<a href="#">
					<img src="/assets/images/top_icon13.png">
				</a>
				<span>
					<a href="#">
						<img src="/assets/images/top_icon14.png">
					</a>
				</span>
				<div class="icon_xl b_r_x">
					<span>
						<img src="/assets/images/icon-file-1.png">
					</span>
				</div>
				<div class="icon_xl">
					<i>
						<img src="/assets/images/top_icon15.png">
					</i>
				</div>
			</div>
			<div class="font_div">
				<div class="f_slc" style="width:110px;">
					<input name="" class="text" type="hidden" value="Font">
					<div class="shtitle lx1">
						<em>
							Font
						</em>
						<ul class="selectauto" id="s1">
							<li svalue="01">
								Font1
							</li>
							<li svalue="02">
								Font2
							</li>
						</ul>
					</div>
				</div>
				<div class="f_slc" style="width:80px;">
					<input name="" class="text" type="hidden" value="Size">
					<div class="shtitle lx2">
						<em>
							Size
						</em>
						<ul class="selectauto" id="s2">
							<li svalue="01">
								12px
							</li>
							<li svalue="02">
								14px
							</li>
							<li svalue="03">
								16px
							</li>
							<li svalue="04">
								18px
							</li>
						</ul>
					</div>
				</div>
				<p>
					<span>
						<a href="#">
							<img src="/assets/images/top_icon16.png">
						</a>
					</span>
					<a href="#">
						<img src="/assets/images/top_icon17.png">
					</a>
					<a href="#">
						<img src="/assets/images/top_icon18.png">
					</a>
					<span>
						<a href="#">
							<img src="/assets/images/top_icon19.png">
						</a>
					</span>
					<a href="#">
						<img src="/assets/images/top_icon20.png">
					</a>
					<a href="#">
						<img src="/assets/images/top_icon21.png">
					</a>
					<a href="#">
						<img src="/assets/images/top_icon22.png">
					</a>
					<span>
						<a href="#">
							<img src="/assets/images/top_icon23.png">
						</a>
					</span>
				</p>
				<div class="f_slc" style="width:80px;">
					<input name="" class="text" type="hidden" value="1 Pt">
					<div class="shtitle lx3">
						<em>
							1 Pt
						</em>
						<ul class="selectauto" id="s3">
							<li svalue="01">
								1 Pt
							</li>
							<li svalue="02">
								2 Pt
							</li>
						</ul>
					</div>
				</div>
				<div class="icon_xl m_t_4 b_r_x">
					<span>
						<img src="/assets/images/top_icon6.png">
					</span>
				</div>
				<div class="icon_xl m_t_4">
					<i>
						<img src="/assets/images/top_icon24.png">
					</i>
				</div>
				<div class="icon_xl m_t_4 b_r_x">
					<span>
						<img src="/assets/images/top_icon25.png">
					</span>
				</div>
				<div class="icon_xl m_t_4">
					<i>
						<img src="/assets/images/top_icon26.png">
					</i>
				</div>
				<div class="icon_xl m_t_4">
					<i>
						<img src="/assets/images/top_icon27.png">
					</i>
				</div>
				<div class="icon_xl m_t_4">
					<i>
						<img src="/assets/images/top_icon28.png">
					</i>
				</div>
				<div class="icon_xl m_t_4">
					<i>
						<img src="/assets/images/top_icon29.png">
					</i>
				</div>
			</div>
		</div>
		<div class="rs_layout_center reTabcon">
			<div class="rs_layout rTablayer show">
				<div class="rs_layout_left" resizable="true" minsize="true" style="width:230px;">
					<div class="rs_layout">
						<div class="rs_layout_top">
							<div class="data_model" style="height:25px;">
								<p style="width:230px;float:right;">
									<a href="#">
										<img src="/assets/images/left_icon1.png">
									</a>
									<a href="#">
										<img src="/assets/images/left_icon2.png">
									</a>
									<a href="#">
										<img src="/assets/images/icon-file-2.png">
									</a>
									<a href="#">
										<img src="/assets/images/left_icon3.png">
									</a>
									<a href="#">
										<img src="/assets/images/left_icon4.png">
									</a>
									<a href="#">
										<img src="/assets/images/left_icon5.png">
									</a>
								</p>
							</div>
						</div>
						<div class="rs_layout_center">
							<div class="lftTreeWrap lf_ct">
								<div class="ztree" id="zTree_adminLIst">
								</div>
							</div>
						</div>
						<div class="rs_layout_bottom left_btm">
							<a href="#" data-id="1" data-node="layout">
								<img src="/assets/images/left_icon6.png">
								布局
							</a>
							<a href="#" data-id="2" class="active" data-node="model">
								<img src="/assets/images/left_icon7.png">
								组件
							</a>
						</div>
					</div>
				</div>
				<!--<div class="rs_layout_right" style="width:300px;"></div>-->
				<div class="rs_layout_center">
					<div class="rs_layout">
						<div class="rs_layout_center">
							<div class="shrinkage">
								<div class="sk_bt">
									<p>
										<i>
										</i>
									</p>
								</div>
								<table width="100%" border="0" cellspacing="0" cellpadding="0">
									<tr>
										<td width="50%">
											<div class="nr r_line">
												<p>
													分析指标:
												</p>
												<span>
													<img src="/assets/images/right_icon1.png">
												</span>
												拖拽左侧指标树中的项到此创建一个新的分析指标
											</div>
										</td>
										<td>
											<div class="nr">
												<p>
													过滤器:
												</p>
												<span>
													<img src="/assets/images/right_icon1.png">
												</span>
												拖拽维度的成员或者指标到此创建一个过滤器
											</div>
										</td>
									</tr>
								</table>
							</div>
							<div class="jqui-resizeable designer_k" id="design_table">
								
							</div>
						</div>
						<div class="rs_layout_bottom toolBar_bottom">
							<p class="fx_icon">
								<a href="#" class="prev">
								</a>
								<a href="#" class="next">
								</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--[if gte IE 8]>
		<script type="text/javascript">
			$(".shtitle").each(function(i) {
				var ls = $('.lx' + (i + 1) + ' li').width();
				$('.lx' + (i + 1) + ' em').css({
					'width': ls + 'px'
				});
			});
		</script>
	<![endif]-->
	<!--[if !IE]><!-->
		<script type="text/javascript">
			$(function() {
				$(".shtitle").each(function(i) {
					var ls = $('.lx' + (i + 1) + ' li').width();
					$('.lx' + (i + 1) + ' em').css({
						'width': ls + 'px'
					});
				});
			});
		</script>
	<!--<![endif]-->
</body>

</html>